import React from 'react';
import { Layout, Typography, Card, List, Divider, Button } from 'antd';
import { FileTextOutlined, BookOutlined, InfoCircleOutlined, DownloadOutlined, CalculatorOutlined } from '@ant-design/icons';

const { Content } = Layout;
const { Title, Text } = Typography;

const DocumentsPage: React.FC = () => {

  // 系统文档数据
  const systemDocs = [
    {
      id: 'system-guide',
      title: '系统使用指南',
      description: '详细介绍系统功能、操作流程和常见问题解答',
      icon: <BookOutlined />
    },
    {
      id: 'calculation-methods',
      title: '计算方法说明',
      description: '介绍各种计算模块的理论依据和计算方法',
      icon: <CalculatorOutlined />
    },
    {
      id: 'engineering-standards',
      title: '工程标准规范',
      description: '相关水利工程设计标准和规范参考资料',
      icon: <InfoCircleOutlined />
    }
  ];

  // 教程视频数据
  const tutorialVideos = [
    {
      id: 'video-1',
      title: '系统功能概览',
      level: '入门',
      duration: '10分钟'
    },
    {
      id: 'video-2',
      title: '溶洞计算模块操作',
      level: '进阶',
      duration: '15分钟'
    },
    {
      id: 'video-3',
      title: '安全岩盘厚度计算详解',
      level: '高级',
      duration: '20分钟'
    }
  ];

  return (
    <Layout className="layout">
      <Content style={{ padding: '0 50px', marginTop: 24, marginBottom: 24 }}>
        <Title level={4}>文档中心</Title>
        
        <Divider>系统文档</Divider>
        <Card title="系统文档中心">
          <List
            dataSource={systemDocs}
            renderItem={doc => (
              <List.Item
                actions={[
                  <Button
                    key="download"
                    type="link"
                    icon={<DownloadOutlined />}
                  >
                    下载
                  </Button>
                ]}
              >
                <List.Item.Meta
                  avatar={doc.icon}
                  title={doc.title}
                  description={doc.description}
                />
              </List.Item>
            )}
          />
        </Card>
        
        <Divider>视频教程</Divider>
        
        <Card title="操作教程视频">
          <List
            dataSource={tutorialVideos}
            renderItem={video => (
              <List.Item
                actions={[
                  <span key="level" style={{ color: 'var(--app-primary-color, #1890ff)' }}>{video.level}</span>,
                  <span key="duration">{video.duration}</span>
                ]}
              >
                <List.Item.Meta
                  title={video.title}
                  description="点击观看详细教程"
                />
              </List.Item>
            )}
          />
        </Card>
      </Content>
    </Layout>
  );
};

export default DocumentsPage;